<template>
<!-- 因为商品的库存数量是goodsonfo页面通过异步加载获取到的，所以传递到子组件的属性值会有延迟，未
    获取到的goodsinfo对象为空，goodsinfo.stockqutity就是undefined,所以max属性值也就是为undefined -->
<!-- 如何获取最终通过goodsinfo.stock_quantity的值，最终的值就是库存量，我们可以使用watch来监听属性值的改变
     从而获取到最新的库存量的值 -->
  <div class="mui-numbox" data-numbox-min="1" >
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input id="test" class="mui-input-numbox" type="number" value="1"
     @change="countChanged" ref="numbox"/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>



<script>
// 引入mui.js文件
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mui(".mui-numbox").numbox();
    // console.log(this.max)
  },
  methods:{
    // 什么时候执行获取文本框的值，通过change事件监听文本框数据的改变
    // 通过在标签中添加ref属性，就可以在script中通过this.$refs.
    // (ref属性对应的值)的方式拿到该标签元素，但是须保证该标签是当前页面
    // 的直接元素，而不是子组件形式那种
    countChanged(){//当文本框的数据被修改时，立即把最新的数据，
    // 通过事件绑定的形式，传递给父组件
      // console.log(this.$refs.numbox.value)
      this.$emit("getcount",this.$refs.numbox.value)
      
    }
  },
  props: ["max"],
  watch: {
    // 属性监听
    max: function(newVal,oldVal) {
      // 使用js方法设置数字输入框的最大值
      mui(".mui-numbox").numbox().setOption('max',newVal)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>